<template>
  <div class="loginCenter">
    <div class="left">
      <LoginShow></LoginShow>
    </div>

    <div class="right">
      <component :is="componentToShow"></component>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute } from "vue-router";

import LoginShow from "./components/loginShow.vue"
import Login from "./components/loginForm.vue"
import UpdatePassword from "./components/updatePawd.vue"
import Register from "./components/registerClient.vue"
import Registercounselor from "./components/registerCounselor.vue"
import { GoPageName } from "@/enums";

const judgePath = (path: any) => {
  if (path === GoPageName.LOGIN) {
    return Login
  } else if (path === GoPageName.UPDATEPASSWORD) {
    return UpdatePassword
  }else if (path === GoPageName.REGISTERCLIENT) {
    return Register
  }else if (path === GoPageName.REGISTERcounselor) {
    return Registercounselor
  }
}

const route = useRoute()
const componentToShow = ref(judgePath(route.params.path)) // 使用 ref 进行响应式声明
watch(
  () => route.params.path,
  (newPath: any, _old: any) => {
    // 当 route.params.path 发生变化时触发
    componentToShow.value = judgePath(newPath)
  }
);

</script>

<style scoped>
.loginCenter {
  width: 1250px;
  margin: auto;
  margin-top: 20px;
  display: flex;
}

.left,
.right {
  margin: auto;
}

.left {
  flex: 3;
  margin-right: 30px;
}

.right {
  flex: 2;
}
</style>
